<template>
    <div class="person-wrapbg" v-if="this.userInfo">
        <div class="person-top" :style="pertopbg">
            <div class="perimg">
                <img :src="this.userInfo.portraitUrl" alt="">
                <div v-if="this.userInfo.accountType==2" class="perlx">
                    <img src="../../assets/images/qy.png" alt="">
                </div>
            </div>
            <p class="pertxt">{{ userInfo.nickName }}</p>
            <p class="pertxt">{{ userInfo.mobileNo }}</p>
        </div>
        <ul class="person-num">
            <li>
                <span>{{ userInfo.balance }}</span>
                <p>账户余额</p>
            </li>
            <li>
                <span>{{ userInfo.integral }}</span>
                <p>我的积分</p>
            </li>
        </ul>
        <div class="person-block"></div>

        <div class="person-list">
            <ul>
                <li>
                    <a :href="taocanUrl()">
                        <i class="iconfont icon-taocanliebiao icoColor1"></i>
                        <span>套餐列表</span>
                    </a>
                </li>
                <li>
                    <a :href="chongzhi()">
                        <i class="iconfont icon-woyaochongzhi icoColor2"></i>
                        <span>我要充值</span>
                    </a>
                </li>
                <li>
                    <a :href="jifen()">
                        <i class="iconfont icon-qiandaosongjifen icoColor3"></i>
                        <span>签到送积分</span>
                    </a>
                </li>
                <li>
                    <a :href="credits()">
                        <i class="iconfont icon-jifenduihuan icoColor4"></i>
                        <span>积分兑换</span>
                    </a>
                </li>                
            </ul>
        </div>

        <div class="person-block"></div>

        <div class="person-list">
            <ul>
                <li>
                    <a :href="myinfo()">
                        <i class="iconfont icon-wodexinxi icoColor5"></i>
                        <span>我的信息</span>
                    </a>
                </li>
                <li>
                    <a :href="order()">
                        <i class="iconfont icon-wodedingdan icoColor1"></i>
                        <span>我的订单</span>
                    </a>
                </li>
                <li>
                    <a @click.prevent="addadd">
                        <i class="iconfont icon-zhucedizhi icoColor4"></i>
                        <span>地址管理</span>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 地址组件 -->
        <mt-popup class="dizhicomponent"  v-model="popupVisible" position="right" :modal="false">
            <MyAddress @closePop="closePop" @checkChoose="checkChoose" ></MyAddress>
        </mt-popup>
        <br>
    </div>
</template>

<script>
import MyAddress from '@/components/Myaddress.vue'
import {mapState,mapActions} from 'vuex'
export default {
    created(){
        this.getUserInfo();
    },
    data(){
        return{
            myAddress: {},
            popupVisible: false,
            pertopbg:{
                backgroundImage: "url(" + require("../../assets/images/perbg.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "100% 100%",
                backgroundPosition: '50% 50%'
            }
        }
    },
    components:{
        MyAddress
    },
    computed:{
        ...mapState({
            userInfo:state => state.personModules.userInfo
        })
    },
    methods: {
        ...mapActions({
            getUserInfo:'personModules/getUserInfo'
        }),
        addadd(){
            this.popupVisible = true
        },
        closePop(){
            this.popupVisible = false
        },
        checkChoose(data){
            this.myAddress.name = data.userName;
            this.myAddress.phone = data.mobileNo;
            this.myAddress.address = data.address;
            this.myAddress.addressId = data.addressId;
            this.popupVisible = false;
        },
        taocanUrl () {
            return '/taocanlist'
        },
        credits () {
            return '/credits'
        },
        chongzhi() {
            return '/chongzhi'
        },
        order() {
            return '/orderList'
        },
        jifen() {
            return '/jifen'
        },
        myinfo() {
            return '/myinfo'
        },
        addressgl(){
            return '/myaddress'
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../../assets/style/order.scss";
.person-wrapbg{
    background: #eee;
    flex-flow: column wrap;
    align-content: space-around;
    flex: auto;
}
.popupAddress {
    height: 100%!important;
    width: 100%!important;
    background: #F6F5F5
}
</style>
